<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
		<style>
			.container{
				background: pink;
			}
			div[class|=col]{
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
				    <div class="thumbnail">
				        <img src="./img/lq1.jpg" alt="bootstrap">
				        <div class="caption">
					        <h3>Bootstrap</h3>
					        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					    </div>
				    </div>
				</div>
				<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-push-0 col-sm-6 col-sm-pull-6">
				    <div class="thumbnail">
				        <img src="./img/lq2.jpg" alt="jQuery">
				        <div class="caption">
					        <h3>jQuery</h3>
					        <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
					    </div>
				    </div>
				</div>
				<div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6 col-sm-push-6">
				    <div class="thumbnail">
				        <img src="./img/lq3.jpg" alt="Vue">
				        <div class="caption">
					        <h3>Vue</h3>
					        <p>Vue.js - 是一套构建用户界面的渐进式框架。</p>
					    </div>
				    </div>
				</div>
				<div class="col-lg-3 col-lg-pull-9 col-md-4 col-md-push-0 col-sm-6 col-sm-pull-6">
				    <div class="thumbnail">
				        <img src="./img/lq6.jpg" alt="Node.js">
				        <div class="caption">
					        <h3>Node.js</h3>
					        <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效</p>
					    </div>
				    </div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	</body>
</html>

